<%@ page import="com.nebula.common.Const" %>
<%@ page import="com.nebula.entity.User" %>
<%@ page import="com.nebula.vo.UserVo" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    UserVo user = (UserVo) session.getAttribute(Const.USER_INFO);
%>
<html>
<head>
    <title><%=Const.SYSTEM_NAME%>
    </title>
    <jsp:include page="header.jsp"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/index.css">
    <style>
        .l-btn-text {
            font-size: 16px;
        }

        .center {
            width: 80%;
            height: 80%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            padding: 10px;
            box-sizing: border-box;
        }
    </style>
</head>
<body class="easyui-layout">
<div data-options="region:'north',split:true,disabled:true,border:false" style="height:60px;padding: 3px"
     class="header">
    <span class="company">
        <img src="${pageContext.request.contextPath}/images/logo.png" alt="">
        <span><%=Const.SYSTEM_NAME%></span>
    </span>
    <div class="welcome right mr-20">
        <span style="display: inline-block;height: 30px;line-height: 30px;">欢迎您：</span>
        <a href="javascript:void(0)" id="mb" class="easyui-menubutton"
           data-options="menu:'#mm',iconCls:'icon-hamburg-user'" style="margin-top: -5px;"><%=user.getRealname()%>
        </a>
        <div id="mm" style="width:150px;">
            <div data-options="iconCls:'icon-hamburg-user'" id="btUserInfo">个人信息</div>
            <div data-options="iconCls:'icon-hamburg-pencil'" id="btPwd">修改密码</div>
            <div data-options="iconCls:'icon-hamburg-lock'" id="btUpdateQuestion">更新安全问题</div>
            <div class="menu-sep"></div>
            <div data-options="iconCls:'icon-hamburg-sign-out'" id="btExit">安全退出</div>
        </div>
    </div>
</div>
<div data-options="region:'west',title:'导航菜单',split:true,iconCls:'icon-hamburg-home'" style="width:260px;">
    <div id="menu" class="easyui-accordion" data-options="fit:true"></div>
</div>
<div data-options="region:'center'" style="padding:5px;">
    <div id="tabs" class="easyui-tabs" data-options="split:true,fit:true"></div>
</div>
<div id="userInfo" style="overflow: hidden;position: relative;display: none">
    <div class="center">
        <form action="" class="form-horizontal mt-10">
            <div class="form-group">
                <label for="userName" class="col-sm-3 control-label">用户名</label>
                <div class="col-sm-9">
                    <input type="text" min="0" step="10" class="form-control" id="userName" placeholder="用户名"
                           autocomplete="off" readonly value="<%=user.getUsername()%>">
                </div>
            </div>
            <div class="form-group">
                <label for="realName" class="col-sm-3 control-label">姓名</label>
                <div class="col-sm-9">
                    <input type="text" min="0" step="10" class="form-control" id="realName" placeholder="姓名"
                           autocomplete="off" value="<%=user.getRealname()%>">
                </div>
            </div>
            <div class="form-group">
                <label for="gender" class="col-sm-3 control-label">性别</label>
                <div class="col-sm-9">
                    <select class="select form-control" name="gender" id="gender">
                        <option value="male">男</option>
                        <option value="female">女</option>
                        <option value="secret">保密</option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label for="role" class="col-sm-3 control-label">用户权限</label>
                <div class="col-sm-9">
                    <input type="text" class="form-control" id="role" placeholder="用户权限" autocomplete="off"
                           readonly value="<%=user.getRoleName()%>">
                </div>
            </div>
            <div class="form-group">
                <label for="createDate" class="col-sm-3 control-label">上次登录时间</label>
                <div class="col-sm-9">
                    <input type="text" class="form-control" id="createDate" placeholder="上次登录时间" autocomplete="off"
                           readonly value="<%=user.getUpdatedTime()%>">
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <button type="button" class="btn btn-primary" id="editUser"><i class="fa fa-floppy-o"></i>&nbsp;
                        保存
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>
<div id="editPwd" style="overflow: hidden;position: relative;display: none">
    <div class="center">
        <form action="" class="form-horizontal mt-10">
            <div class="form-group">
                <label for="oldPwd" class="col-sm-2 control-label">旧密码</label>
                <div class="col-sm-10">
                    <input type="password" min="0" step="10" class="form-control" id="oldPwd" placeholder="旧密码"
                           autocomplete="off">
                </div>
            </div>
            <div class="form-group">
                <label for="newPwd" class="col-sm-2 control-label">新密码</label>
                <div class="col-sm-10">
                    <input type="password" min="0" step="10" class="form-control" id="newPwd" placeholder="新密码"
                           autocomplete="off">
                </div>
            </div>
            <div class="form-group">
                <label for="createDate" class="col-sm-2 control-label">确认密码</label>
                <div class="col-sm-10">
                    <input type="password" class="form-control" id="rePwd" placeholder="确认密码" autocomplete="off">
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <button type="button" class="btn btn-primary" id="btEditPwd"><i class="fa fa-save"></i>&nbsp;
                        修改
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>
<div id="editQa" style="overflow: hidden;position: relative;display: none">
    <div class="center">
        <form action="#" class="form-horizontal mt-10" method="post">
            <div class="form-group">
                <label for="pwd" class="col-sm-2 control-label">密码</label>
                <div class="col-sm-10">
                    <input type="password" min="0" step="10" class="form-control" id="pwd" placeholder="验证你的账户信息"
                           autocomplete="off">
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <button type="button" class="btn btn-primary" id="btValidate"><i class="fa fa-check"></i>&nbsp;确定
                    </button>
                </div>
                <div class="col-sm-offset-2 col-sm-10 mt-15">
                    <span id="errorMsg" style="color: red;font-size: 14px"></span>
                </div>
            </div>
        </form>
    </div>
</div>
<jsp:include page="footer.jsp"/>
<script src="${pageContext.request.contextPath}/js/custom/index.js"></script>
<script>
    $(function () {
        leftMenu();

        let gender = '<%=user.getGender()%>';
        let $gender = $("#gender");
        if (gender === '男') {
            $gender[0].selectedIndex = 0;
        } else if (gender === '女') {
            $gender[0].selectedIndex = 1;
        } else {
            $gender[0].selectedIndex = 2;
        }

        $("#userInfo").window({
            width: 600,
            height: 400,
            title: '个人信息',
            iconCls: 'icon-hamburg-user',
            collapsible: true,
            minimizable: false,
            maximizable: false,
            resizable: false,
            closed: true
        });

        $("#editPwd").window({
            width: 600,
            height: 300,
            title: '修改密码',
            iconCls: 'icon-hamburg-pencil',
            collapsible: true,
            minimizable: false,
            maximizable: false,
            resizable: false,
            closed: true
        });

        $("#editQa").window({
            width: 600,
            height: 500,
            title: '更新你的安全问题',
            iconCls: 'icon-hamburg-lock',
            collapsible: true,
            minimizable: false,
            maximizable: false,
            resizable: false,
            closed: true,
            onClose: function () {
                $("#editQa iframe").remove();
                $("#editQa #pwd").val("");
                $("#editQa form").show();
                $("#editQa #errorMsg").text("");
            }
        });

        $("#btExit").on("click", function () {
            layer.confirm("确认退出<%=Const.SYSTEM_NAME%>吗？", {icon: 3, title: "退出确认"}, function (index) {
                $.ajax({
                    type: "get",
                    url: "${pageContext.request.contextPath}/user?method=logout",
                    success: function (data) {
                        window.location.href = data.data;
                    }
                });
                layer.close(index);
            });
        });

        $("#btUserInfo").on("click", function () {
            $("#userInfo").window('open');
        });

        $("#editUser").on("click", function () {
            let realName = $.trim($("#realName").val());
            let gender = $.trim($("#gender").val());
            if (!realName) {
                layer.msg("姓名不能为空", {icon: 2});
                return;
            }
            $.ajax({
                type: "post",
                url: "${pageContext.request.contextPath}/user",
                dataType: "json",
                data: {
                    method: "update",
                    id: '<%=user.getId()%>',
                    realName: realName,
                    gender: gender
                },
                success: function (data) {
                    if (data.status === 20000) {
                        layer.msg(data.msg, {icon: 1})
                    } else {
                        layer.msg(data.msg, {icon: 2})
                    }
                    $("#userInfo").window('close');
                }
            });
        });

        $("#btPwd").on("click", function () {
            $("#editPwd").window('open');
        });

        $("#btEditPwd").on("click", function () {
            let oldPwd = $.trim($("#oldPwd").val());
            let newPwd = $.trim($("#newPwd").val());
            let rePwd = $.trim($("#rePwd").val());
            if (!oldPwd) {
                layer.msg("旧密码不能为空", {icon: 2});
                return;
            }
            if (!newPwd) {
                layer.msg("新密码不能为空", {icon: 2});
                return;
            }
            if (!rePwd) {
                layer.msg("确认密码不能为空", {icon: 2});
                return;
            }
            if (newPwd !== rePwd) {
                layer.msg("两次密码不一致，请重新输入", {icon: 2});
                return;
            }
            $.ajax({
                type: "post",
                url: "${pageContext.request.contextPath}/user",
                data: {
                    method: "updatePwd",
                    id: "<%=user.getId()%>",
                    oldPwd: oldPwd,
                    newPwd: newPwd
                },
                dataType: "json",
                success: function (data) {
                    $("#oldPwd").val("");
                    $("#newPwd").val("");
                    $("#rePwd").val("");
                    $("#editPwd").window('close');
                    if (data.status === 20000) {
                        layer.msg(data.msg, {icon: 1, time: 1500}, function () {
                            window.location.href = "${pageContext.request.contextPath}/login.jsp";
                        });
                    } else {
                        layer.msg(data.msg, {icon: 2})
                    }
                }
            });
        });

        $("#btUpdateQuestion").on("click", function () {
            $("#editQa").window('open');
        });

        $("#btValidate").on("click", function () {
            $.post("${pageContext.request.contextPath}/user", {
                "method": "checkPwd",
                "pwd": $.trim($("#editQa #pwd").val())
            }, function (result) {
                if (result.status === 20000) {
                    $("#editQa #errorMsg").text("");
                    $("#editQa form").hide();
                    let _iframe = '<iframe id="qa-iframe" width="100%" height="100%" frameborder="0"  scrolling="no" src="${pageContext.request.contextPath}/question?method=indexToQa"></iframe>';
                    $("#editQa .center").append(_iframe);
                } else {
                    $("#editQa #errorMsg").text(result.msg);
                }
            }, "json");
        });
    });

    function leftMenu() {

        //获取一级目录
        $.post("${pageContext.request.contextPath}/menu", {"method": "levelOne"}, function (result) {
            let $menu = $("#menu");
            $.each(result, function (i, e) {
                let id = e.id;
                let flag = i === 0;
                if ($menu.accordion('getPanel', e.text)) {
                    $menu.accordion('remove', e.text);
                }
                $menu.accordion('add', {
                    title: e.text,
                    content: "<ul id='tree-" + id + "' ></ul>",
                    selected: flag,
                    iconCls: e.iconCls
                });
                //获取二级目录
                $.get("${pageContext.request.contextPath}/menu", {"method": "levelTwo", "parentId": id}, function
                    (data) {
                    $("#tree-" + id).tree({
                        data: data,
                        onClick: function (node) {
                            openTabs(node.text, "${pageContext.request.contextPath}" + node.attributes, node.iconCls);
                        }
                    });
                }, "json");
            });
        }, "json");
    }

    function closeWindow(id) {
        $(id).window("close");
    }
</script>
</body>
</html>
